import { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Calendar, Clock, Share2, ThumbsUp, MessageSquare, Calendar as CalendarIcon, ArrowLeft, ArrowRight, Link as LinkIcon, User, CalendarDays } from "lucide-react";

// 模拟文章数据 - 在实际实现中，这些数据会从数据库中获取
const blogPosts = [
  {
    id: "1",
    title: "构建自主AI代理: 技术挑战与解决方案",
    excerpt: "探索在创建真正自主的企业级AI代理时的关键技术挑战，以及我们的突破性解决方案。",
    coverImage: "/images/blog/blog-1.jpg",
    date: "2024-03-05",
    author: {
      name: "Dr. Sarah Chen",
      avatar: "/images/team/placeholder.png",
      role: "CEO & AI研究主管",
      bio: "Sarah拥有人工智能领域15年的研究经验，曾在顶级技术大学领导AI研究部门。她专注于自主系统和机器学习算法的研究。"
    },
    category: "技术",
    tags: ["AI代理", "机器学习", "企业应用"],
    readTime: "7 分钟",
    content: `<p class="text-lg mb-6">
      在人工智能领域，构建真正自主的AI代理一直是研究人员和工程师们追求的前沿目标。bgactor的工程团队在过去两年中致力于解决企业级AI代理面临的核心技术挑战，今天我们很高兴分享一些关键洞见和突破。
    </p>
    
    <h2 class="text-2xl font-bold text-white mt-10 mb-4">自主AI代理的基本架构</h2>
    
    <p class="mb-4">
      真正的自主AI代理需要几个关键组件协同工作：
    </p>
    
    <ul class="list-disc pl-6 mb-6 space-y-2">
      <li>
        <strong class="text-white">感知层</strong>: 通过API、数据库连接或传感器输入接收环境数据
      </li>
      <li>
        <strong class="text-white">认知处理层</strong>: 包括自然语言理解、决策引擎和学习模块
      </li>
      <li>
        <strong class="text-white">行动层</strong>: 执行决策，可能是API调用、数据库操作或物理动作
      </li>
      <li>
        <strong class="text-white">记忆与知识库</strong>: 存储经验和领域知识
      </li>
      <li>
        <strong class="text-white">目标管理系统</strong>: 协调长期目标和短期任务的优先级
      </li>
    </ul>
    
    <p class="mb-6">
      在企业环境中，这些组件必须安全、可靠地协同工作，同时与现有系统无缝集成。
    </p>
    
    <h2 class="text-2xl font-bold text-white mt-10 mb-4">关键技术挑战</h2>
    
    <h3 class="text-xl font-semibold text-white mt-6 mb-3">1. 决策的可解释性与透明度</h3>
    
    <p class="mb-6">
      企业环境要求AI系统的决策过程透明且可解释。这尤其在金融、医疗等受监管行业至关重要。我们的团队开发了一种多层次解释框架，可以根据用户需求提供不同复杂度的决策解释 - 从高层业务逻辑到低层数学推理。
    </p>
    
    <h3 class="text-xl font-semibold text-white mt-6 mb-3">2. 安全边界与授权管理</h3>
    
    <p class="mb-6">
      自主代理需要在预定义的安全边界内操作。我们实现了多层次的安全边界系统：硬边界（代理绝不能越过的限制）和软边界（可以在特定条件下临时扩展的限制）。这确保了代理的行动自由度，同时维持安全性。
    </p>
    
    <h3 class="text-xl font-semibold text-white mt-6 mb-3">3. 持续自我改进</h3>
    
    <p class="mb-6">
      一个强大的挑战是创建能从经验中持续学习的系统。我们采用了混合学习方法，结合监督学习、强化学习和自监督学习，使代理能够从各种反馈中学习：直接人类反馈、任务成功指标和系统限制。
    </p>
    
    <div class="bg-indigo-900/30 border border-indigo-800 rounded-lg p-6 my-8">
      <h3 class="text-xl font-semibold text-white mb-3">技术亮点: 自适应学习率</h3>
      <p>
        我们的突破性创新之一是自适应学习率框架，根据任务领域、可用数据质量和先前性能动态调整代理的学习参数。这使得代理在新领域能快速适应，而在已掌握的领域中更加谨慎，避免过度拟合和灾难性遗忘问题。
      </p>
    </div>
    
    <h2 class="text-2xl font-bold text-white mt-10 mb-4">实际应用案例</h2>
    
    <p class="mb-4">
      我们的企业客户已经在几个关键领域部署了自主AI代理：
    </p>
    
    <ol class="list-decimal pl-6 mb-6 space-y-2">
      <li>
        <strong class="text-white">供应链优化</strong>: 自主监控和调整库存水平、预测需求变化并优化物流路线
      </li>
      <li>
        <strong class="text-white">客户服务增强</strong>: 处理复杂查询，学习客户偏好，主动提供个性化支持
      </li>
      <li>
        <strong class="text-white">安全监控</strong>: 检测异常模式，调查潜在威胁，协调响应措施
      </li>
    </ol>
    
    <h2 class="text-2xl font-bold text-white mt-10 mb-4">未来发展方向</h2>
    
    <p class="mb-6">
      我们的研发路线图包括几个令人兴奋的方向：
    </p>
    
    <ul class="list-disc pl-6 mb-6 space-y-2">
      <li>增强跨域学习能力，使代理能将一个领域的知识转移到新领域</li>
      <li>改进多代理协作框架，支持更复杂的集体任务</li>
      <li>深化人类反馈整合，使代理更好地理解和适应人类意图</li>
    </ul>
    
    <p class="mb-6">
      bgactor团队致力于推动自主AI代理的前沿，同时确保这些技术安全、负责任地应用于企业环境。我们相信AI代理的未来将是增强人类能力，而非替代人类。
    </p>`,
    comments: [
      {
        id: 1,
        author: "Mike Johnson",
        avatar: "/images/avatars/avatar-1.png",
        date: "2024-03-06",
        content: "非常精彩的文章！我特别欣赏你们在安全边界方面的工作。对于金融行业来说，这是采用AI代理的关键考虑因素。",
        likes: 5
      },
      {
        id: 2,
        author: "Linda Zhang",
        avatar: "/images/avatars/avatar-2.png",
        date: "2024-03-06",
        content: "我想知道你们如何处理不同国家和地区的法规合规性问题？自适应AI代理是否能够根据不同的法规环境调整行为？",
        likes: 3,
        replies: [
          {
            id: 21,
            author: "Dr. Sarah Chen",
            avatar: "/images/team/placeholder.png",
            date: "2024-03-07",
            content: "这是一个很好的问题，Linda。我们实际上构建了一个可配置的合规引擎，能够根据不同的法规环境应用不同的规则集。代理会根据操作区域自动切换适用的合规模型。"
          }
        ]
      }
    ],
    featured: true
  },
  {
    id: "6",
    title: "AI代理与人类协作的未来",
    excerpt: "我们如何设计AI系统来补充人类能力，而不是取代它们。探索人类与AI的协作未来。",
    coverImage: "/images/blog/blog-6.jpg",
    date: "2024-01-10",
    author: {
      name: "James Wilson",
      avatar: "/images/team/placeholder.png",
      role: "CTO",
      bio: "James在谷歌工作了10年，专注于大规模AI系统和企业软件架构。他是多个开源AI项目的贡献者，也是《构建可扩展AI系统》一书的作者。"
    },
    category: "思想领导力",
    tags: ["未来工作", "人机协作", "AI伦理"],
    readTime: "8 分钟",
    content: `<p class="text-lg mb-6">
      AI技术的快速发展引发了关于自动化和就业未来的重要讨论。在bgactor，我们的愿景不是创建替代人类的AI，而是开发能够增强人类能力、促进协作的AI系统。本文探讨了人机协作的未来格局以及我们如何设计技术来支持这一愿景。
    </p>
    
    <h2 class="text-2xl font-bold text-white mt-10 mb-4">重新构想人机关系</h2>
    
    <p class="mb-6">
      关于AI的许多叙事都围绕着一个错误的二分法：要么AI替代人类，要么人类控制AI。我们认为更有成效的框架是把人类和AI视为协作伙伴，各自带来独特的优势。
    </p>
    
    <p class="mb-6">
      人类擅长创造性思维、道德判断、情感智能和战略思考。AI则在处理大量数据、识别模式、执行精确计算和消除偏见方面表现出色。当两者结合时，我们可以实现前所未有的成果。
    </p>
    
    <h2 class="text-2xl font-bold text-white mt-10 mb-4">协作型AI代理的设计原则</h2>
    
    <p class="mb-4">
      在bgactor，我们遵循以下原则设计真正的协作型AI系统：
    </p>
    
    <ol class="list-decimal pl-6 mb-6 space-y-2">
      <li>
        <strong class="text-white">互补性而非替代性</strong>: 设计AI来处理重复性或数据密集型任务，释放人类专注于创造性和战略性工作
      </li>
      <li>
        <strong class="text-white">透明性和可解释性</strong>: 确保人类合作者理解AI的决策和建议
      </li>
      <li>
        <strong class="text-white">适应性学习</strong>: 使AI能够从人类反馈中学习，随着时间改进协作效果
      </li>
      <li>
        <strong class="text-white">无缝交互</strong>: 设计直观的接口使人类与AI之间的交流自然流畅
      </li>
      <li>
        <strong class="text-white">人类主导的价值观对齐</strong>: 确保AI代理的目标和价值观与其人类伙伴保持一致
      </li>
    </ol>
    
    <div class="bg-indigo-900/30 border border-indigo-800 rounded-lg p-6 my-8">
      <h3 class="text-xl font-semibold text-white mb-3">案例研究: 协作型分析代理</h3>
      <p class="mb-4">
        我们的一个客户 - 一家全球咨询公司 - 部署了协作型分析代理与其研究团队合作。AI代理处理文献搜索、数据分析和模式识别，同时人类专家提供策略方向、评估发现的相关性并构建叙事。
      </p>
      <p>
        结果是研究产出增加了47%，同时团队报告说他们的工作更加有意义，因为他们可以专注于高价值的思考而不是数据整理。
      </p>
    </div>
    
    <h2 class="text-2xl font-bold text-white mt-10 mb-4">重新思考工作流程</h2>
    
    <p class="mb-6">
      真正的人机协作不仅仅是在现有工作流程中添加AI工具。它需要从根本上重新思考工作的组织方式。在bgactor，我们提倡一种"增强型工作流"方法，其中：
    </p>
    
    <ul class="list-disc pl-6 mb-6 space-y-2">
      <li>任务根据人类和AI的相对优势动态分配</li>
      <li>反馈循环使系统随着时间变得更加有效</li>
      <li>工作节奏尊重人类的认知限制，避免信息过载</li>
      <li>系统鼓励探索和创新，而不仅仅是优化</li>
    </ul>
    
    <h2 class="text-2xl font-bold text-white mt-10 mb-4">未来工作场所中的技能转变</h2>
    
    <p class="mb-6">
      随着AI承担更多常规和分析任务，我们预计未来工作场所中的人类角色将更加偏向：
    </p>
    
    <ul class="list-disc pl-6 mb-6 space-y-2">
      <li>
        <strong class="text-white">复杂问题构建</strong>: 定义值得解决的问题和评估标准
      </li>
      <li>
        <strong class="text-white">跨领域合成</strong>: 结合不同领域的见解创造新知识
      </li>
      <li>
        <strong class="text-white">AI协作管理</strong>: 有效指导AI工具以实现最佳结果
      </li>
      <li>
        <strong class="text-white">伦理监督</strong>: 确保AI应用符合社会价值观和目标
      </li>
      <li>
        <strong class="text-white">情感智能工作</strong>: 需要共情、创造力和人际理解的角色
      </li>
    </ul>
    
    <p class="mb-6">
      在bgactor，我们致力于创造技术来支持这一转变，提供工具帮助人们发展这些高价值技能，而不是简单地自动化现有工作。
    </p>
    
    <h2 class="text-2xl font-bold text-white mt-10 mb-4">结论：共建而非替代的未来</h2>
    
    <p class="mb-6">
      我们相信AI的真正潜力不在于替代人类工作者，而在于放大人类创造力、洞察力和决策能力。通过精心设计的协作系统，我们可以创造一个未来，在这个未来中，人类和AI共同解决我们时代最紧迫的挑战。
    </p>
    
    <p class="mb-6">
      bgactor致力于推动这一协作愿景，开发不仅技术先进，而且从设计上就促进人机伙伴关系的AI系统。我们邀请有兴趣探索这些可能性的组织与我们联系。
    </p>`,
    comments: [
      {
        id: 1,
        author: "Thomas Lee",
        avatar: "/images/avatars/avatar-3.png",
        date: "2024-01-12",
        content: "这篇文章提供了一个令人耳目一新的视角。很高兴看到AI企业积极思考如何增强而非取代人类能力。我特别赞同关于重新定义工作流程的观点。",
        likes: 8
      },
      {
        id: 2,
        author: "Sophia Rodriguez",
        avatar: "/images/avatars/avatar-4.png",
        date: "2024-01-14",
        content: "作为一名在AI领域工作的教育工作者，我非常欣赏这种协作方法。我们需要更多这样的思考来指导下一代AI系统的开发。一个问题：你们如何看待教育系统需要如何调整以培养这些新型的协作技能？",
        likes: 12,
        replies: [
          {
            id: 21,
            author: "James Wilson",
            avatar: "/images/team/placeholder.png",
            date: "2024-01-15",
            content: "谢谢你的问题，Sophia。我认为教育需要从强调知识获取转向批判性思维、问题构建和AI工具有效使用的培训。我们实际上正在与几所大学合作开发课程，教授'增强型思考' - 使用AI作为思维伙伴的艺术。"
          }
        ]
      }
    ],
    featured: true
  }
];

// 查找指定ID的文章
const getPostById = (id: string) => blogPosts.find(post => post.id === id);

// 获取相关文章（同一类别的其他文章）
const getRelatedPosts = (currentPost: any) => {
  return blogPosts
    .filter(post => post.id !== currentPost.id && post.category === currentPost.category)
    .slice(0, 3);
};

// 动态生成页面元数据
export function generateMetadata({ params }: { params: { id: string } }): Metadata {
  const post = getPostById(params.id);
  
  if (!post) {
    return {
      title: "文章未找到 | bgactor AI Agents",
      description: "抱歉，您请求的文章不存在。"
    };
  }
  
  return {
    title: `${post.title} | bgactor AI Agents`,
    description: post.excerpt
  };
}

export default function BlogPostPage({ params }: { params: { id: string } }) {
  const post = getPostById(params.id);
  
  // 如果找不到文章，显示404页面
  if (!post) {
    notFound();
  }
  
  const relatedPosts = getRelatedPosts(post);
  
  return (
    <div className="flex flex-col min-h-screen bg-slate-950">
      {/* 文章头部 */}
      <section className="w-full py-12 md:py-24 bg-gradient-to-r from-slate-900 to-indigo-950">
        <div className="container px-4 md:px-6">
          <div className="max-w-3xl mx-auto">
            <div className="flex items-center gap-2 mb-6">
              <Link 
                href="/blog" 
                className="flex items-center text-zinc-400 hover:text-[#50E3C2] transition-colors"
              >
                <ArrowLeft className="mr-2 h-4 w-4" />
                返回博客
              </Link>
              <Separator orientation="vertical" className="h-4 bg-zinc-700" />
              <Badge className="bg-indigo-900 hover:bg-indigo-800">
                {post.category}
              </Badge>
            </div>
            
            <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tighter text-white mb-6">
              {post.title}
            </h1>
            
            <div className="flex flex-wrap items-center gap-4 text-zinc-400 mb-8">
              <div className="flex items-center">
                <CalendarDays className="h-4 w-4 mr-2" />
                <span>{post.date}</span>
              </div>
              <div className="flex items-center">
                <Clock className="h-4 w-4 mr-2" />
                <span>{post.readTime}</span>
              </div>
              <div className="flex flex-wrap gap-2">
                {post.tags.map((tag) => (
                  <Badge key={tag} variant="outline" className="text-zinc-400 border-zinc-700">
                    {tag}
                  </Badge>
                ))}
              </div>
            </div>
            
            <div className="flex items-center gap-4 mb-8">
              <Avatar className="h-10 w-10 border border-slate-800">
                <AvatarFallback className="bg-slate-700 text-[#50E3C2]">
                  {post.author.name.charAt(0)}
                </AvatarFallback>
              </Avatar>
              <div>
                <p className="text-white font-medium">{post.author.name}</p>
                <p className="text-zinc-400 text-sm">{post.author.role}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* 文章内容 */}
      <section className="w-full py-12 md:py-24 bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
            {/* 主要内容区 */}
            <div className="lg:col-span-3">
              <div className="max-w-3xl">
                {/* 文章示例图 */}
                <div className="aspect-video relative bg-slate-800 rounded-lg mb-8">
                  <div className="flex items-center justify-center h-full bg-gradient-to-br from-indigo-900/30 to-indigo-800/10">
                    <Calendar className="h-24 w-24 text-[#50E3C2] opacity-20" />
                  </div>
                </div>
                
                {/* 文章正文内容 */}
                <article className="prose prose-invert prose-slate max-w-none">
                  <div dangerouslySetInnerHTML={{ __html: post.content }} />
                </article>
                
                {/* 分享和点赞 */}
                <div className="flex items-center justify-between mt-10 pt-6 border-t border-slate-800">
                  <div className="flex items-center gap-4">
                    <Button variant="outline" size="sm" className="gap-2">
                      <ThumbsUp className="h-4 w-4" />
                      <span>赞</span>
                    </Button>
                    <Button variant="outline" size="sm" className="gap-2">
                      <Share2 className="h-4 w-4" />
                      <span>分享</span>
                    </Button>
                    <Button variant="outline" size="sm" className="gap-2">
                      <LinkIcon className="h-4 w-4" />
                      <span>复制链接</span>
                    </Button>
                  </div>
                </div>
                
                {/* 作者信息 */}
                <div className="mt-12 bg-slate-900/50 border border-slate-800 rounded-lg p-6">
                  <div className="flex items-start gap-4">
                    <Avatar className="h-16 w-16 border border-slate-800">
                      <AvatarFallback className="bg-slate-700 text-[#50E3C2] text-xl">
                        {post.author.name.charAt(0)}
                      </AvatarFallback>
                    </Avatar>
                    <div>
                      <h3 className="text-xl font-bold text-white">{post.author.name}</h3>
                      <p className="text-[#50E3C2]">{post.author.role}</p>
                      <p className="text-zinc-400 mt-2">{post.author.bio}</p>
                    </div>
                  </div>
                </div>
                
                {/* 评论区 */}
                <div className="mt-12">
                  <h3 className="text-2xl font-bold text-white mb-6">评论 ({post.comments?.length || 0})</h3>
                  
                  {/* 评论表单 */}
                  <div className="bg-slate-900/50 border border-slate-800 rounded-lg p-6 mb-8">
                    <h4 className="text-lg font-medium text-white mb-4">发表评论</h4>
                    <textarea
                      className="w-full bg-slate-800 border border-slate-700 rounded-lg p-3 text-white min-h-[120px] mb-4"
                      placeholder="分享你的想法..."
                    />
                    <Button className="bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
                      提交评论
                    </Button>
                  </div>
                  
                  {/* 评论列表 */}
                  {post.comments && post.comments.length > 0 && (
                    <div className="space-y-6">
                      {post.comments.map((comment) => (
                        <div key={comment.id} className="border-b border-slate-800 pb-6 last:border-0">
                          <div className="flex items-start gap-4">
                            <Avatar className="h-10 w-10">
                              <AvatarFallback className="bg-slate-700 text-white">
                                {comment.author.charAt(0)}
                              </AvatarFallback>
                            </Avatar>
                            <div className="flex-1">
                              <div className="flex items-center justify-between">
                                <h5 className="font-medium text-white">{comment.author}</h5>
                                <span className="text-zinc-500 text-sm">{comment.date}</span>
                              </div>
                              <p className="text-zinc-300 mt-2">{comment.content}</p>
                              <div className="flex items-center gap-4 mt-3">
                                <Button variant="ghost" size="sm" className="h-8 px-2 text-zinc-400">
                                  <ThumbsUp className="h-4 w-4 mr-1" />
                                  <span>{comment.likes}</span>
                                </Button>
                                <Button variant="ghost" size="sm" className="h-8 px-2 text-zinc-400">
                                  <MessageSquare className="h-4 w-4 mr-1" />
                                  <span>回复</span>
                                </Button>
                              </div>
                              
                              {/* 回复 */}
                              {comment.replies && comment.replies.length > 0 && (
                                <div className="ml-6 mt-4 space-y-4">
                                  {comment.replies.map((reply) => (
                                    <div key={reply.id} className="pt-4 border-t border-slate-800">
                                      <div className="flex items-start gap-3">
                                        <Avatar className="h-8 w-8">
                                          <AvatarFallback className="bg-indigo-800 text-white text-xs">
                                            {reply.author.charAt(0)}
                                          </AvatarFallback>
                                        </Avatar>
                                        <div>
                                          <div className="flex items-center">
                                            <h6 className="font-medium text-white text-sm">{reply.author}</h6>
                                            <span className="text-zinc-500 text-xs ml-2">{reply.date}</span>
                                          </div>
                                          <p className="text-zinc-300 text-sm mt-1">{reply.content}</p>
                                        </div>
                                      </div>
                                    </div>
                                  ))}
                                </div>
                              )}
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>
            
            {/* 侧边栏 */}
            <div className="lg:col-span-1">
              {/* 相关文章 */}
              <div className="sticky top-8">
                <h3 className="text-xl font-bold text-white mb-4">相关文章</h3>
                <div className="space-y-4">
                  {relatedPosts.map((relatedPost) => (
                    <Card key={relatedPost.id} className="bg-slate-900/50 border-slate-800">
                      <CardHeader className="pb-2">
                        <CardTitle className="text-white text-base">
                          <Link href={`/blog/${relatedPost.id}`} className="hover:text-[#50E3C2] transition-colors">
                            {relatedPost.title}
                          </Link>
                        </CardTitle>
                      </CardHeader>
                      <CardContent className="pb-2">
                        <div className="flex items-center justify-between text-zinc-400 text-xs">
                          <div className="flex items-center">
                            <User className="h-3 w-3 mr-1" />
                            <span>{relatedPost.author.name}</span>
                          </div>
                          <div className="flex items-center">
                            <Clock className="h-3 w-3 mr-1" />
                            <span>{relatedPost.readTime}</span>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  ))}
                </div>
                
                {/* 订阅卡片 */}
                <div className="mt-8 bg-gradient-to-br from-indigo-900 to-indigo-950 rounded-lg p-6">
                  <h4 className="text-lg font-bold text-white mb-2">订阅我们的通讯</h4>
                  <p className="text-zinc-300 text-sm mb-4">
                    获取最新的AI洞见和技术更新。
                  </p>
                  <div className="space-y-2">
                    <input 
                      type="email" 
                      placeholder="your.email@company.com" 
                      className="w-full bg-slate-800/70 border border-slate-700/70 rounded-lg p-2 text-white text-sm"
                    />
                    <Button className="w-full bg-[#50E3C2] text-slate-900 hover:bg-[#3AC4A5]">
                      订阅
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* 下一篇/上一篇导航 */}
      <section className="w-full py-12 border-t border-slate-800 bg-slate-950">
        <div className="container px-4 md:px-6">
          <div className="flex flex-col sm:flex-row justify-between gap-6">
            <div className="flex-1">
              <Link href="/blog/not-implemented-yet" className="group block p-4 border border-slate-800 bg-slate-900/30 rounded-lg hover:border-[#50E3C2]/30 transition-colors">
                <div className="flex items-center text-zinc-400 group-hover:text-[#50E3C2] mb-2">
                  <ArrowLeft className="h-4 w-4 mr-2" />
                  <span>上一篇</span>
                </div>
                <h4 className="text-white group-hover:text-[#50E3C2] font-medium transition-colors">
                  医疗保健行业AI代理使用案例
                </h4>
              </Link>
            </div>
            <div className="flex-1">
              <Link href="/blog/not-implemented-yet" className="group block p-4 border border-slate-800 bg-slate-900/30 rounded-lg hover:border-[#50E3C2]/30 transition-colors">
                <div className="flex items-center justify-end text-zinc-400 group-hover:text-[#50E3C2] mb-2">
                  <span>下一篇</span>
                  <ArrowRight className="h-4 w-4 ml-2" />
                </div>
                <h4 className="text-white group-hover:text-[#50E3C2] font-medium text-right transition-colors">
                  企业AI实施的5个关键策略
                </h4>
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
} 